<template>
	<view class="real_name">
		<!-- 顶部自定义导航 -->
		<!-- <uni-nav-bar :fixed="true" backgroundColor="#00a660" color="#fff" height="90rpx">
			<block slot="left">
				<i class="iconfont nav_backIcon" @click="back">&#xe8b8;</i>
				<span style="font-size: 32rpx;">实名认证</span>
			</block>
		</uni-nav-bar> -->
		<uni-nav-bar left-icon="left" title="个人实名认证" @clickLeft="back" color="#fff" backgroundColor="#00a660"/>
		
		<!-- 内容显示 -->
		<view class="conta_del">
			<img src="@/static/images/person-certification.png" style="display: block; margin:40rpx auto;width: 180rpx;" />
			<h3>实名认证过程中，系统可能会采集如下信息：</h3>
			<p class="border_top" style="margin-top:10rpx">申请人姓名、证件号码</p>
			<p class="border_top">网络运营商注册手机号码（仅手机认证获取）</p>
			<p class="border_top">银行卡或预留手机号码（仅银行卡认证获取）</p>
			<p class="border_top">申请人人脸信息（仅人脸识别认证获取）</p>

			<!-- 协议复选框 -->
			<checkbox-group style="margin-top:20rpx;text-align: left;" @change="selectPo">
				<label>
					<checkbox value="xieyi" color="#00a660" style="transform:scale(0.7)" />我已阅读并同意 <a class="a-primary"><span @click.stop="privacyPolicy">《用户服务协议》</span><span @click.stop="userAgreement">《用户隐私政策》</span></a>
				</label>
			</checkbox-group>
<!--			<checkbox-group @change="selectFa" style="text-align: left;">
				<label>
					<checkbox value="face" color="#00a660" style="transform:scale(0.7)" />我同意励氪签采集人脸照片用于实名认证
				</label>
			</checkbox-group>-->
		</view>

		<!-- 底部按钮 -->
		<button class="footer-btn" @click="nextAgree">开始认证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				confirmPolicy: '',
				confirmFace: '',
			}
		},
    onLoad(option) {
      let signTask = option.signTask;
      if (!!signTask) {
        this.$signTaskDialog({
          isShow: true,
          isShowTitle: false,
          confirmMsg: "系统检测到：您有一个签署任务，但您还未完成个人实名认证！",
          confirmBtnText: "知道了，去认证"
        });
      }
    },
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/index'
				})
			},
			/** 用户协议 */
			privacyPolicy(){
				this.$tab.navigateTo('/pages/common/policy/userAgreement')
			},
			/** 用户隐私政策 */
			userAgreement(){
				this.$tab.navigateTo('/pages/common/policy/privacyPolicy')
			},
			// 协议选择框
			selectPo(e) {
				this.confirmPolicy = e.detail.value[0]
				console.log('confirmPolicy的值', this.confirmPolicy)
			},
			selectFa(e) {
				this.confirmFace = e.detail.value[0]
				console.log('confirmFace的值', this.confirmFace)
			},
			/** 查登录并签署《法定代表人全业务授权书》 */
			nextAgree() {
				if (this.confirmPolicy == '' || this.confirmPolicy == undefined ) {
					this.$modal.msgError("请勾选协议")
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/authentication/personal/authentication'
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-nav-bar-text{
		font-size: 32rpx;
		opacity: 1;
		font-weight: 700;
	}
	page {
		background:$uni-bg-color;
	}

	.uni-label-pointer {
		color: #999999;
		font-size: 24rpx;
		display: block;
	}

	.real_name {
		text-align: center;
		width: 100%;
        padding-bottom:calc(24rpx +  constant(safe-area-inset-bottom));
        padding-bottom:calc(24rpx +  env(safe-area-inset-bottom)); 
		padding-bottom:24rpx;
		// 底部按钮
		.footer-btn {
			background-color: $uni-color-primary;
			color: #fff;
			position: absolute;
			width: 90%;
			font-size: 32rpx;
			left: 5%;
			bottom: 220rpx;
		}

		// 协议内容
		.conta_del {
			width: 100%;
			// box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(10, 13, 47, 0.05);
			padding: 0 20rpx 60rpx 32rpx;
			position: relative;
			// 头像
			#avater {
				color: #fff;
				border: 8rpx solid #fff;
				background-color: $uni-color-primary;
				border-radius: 50%;
				font-size: 100rpx;
				padding: 40rpx 20rpx 0 20rpx;
				position: absolute;
				top: -100rpx;
				left: 40%;
				position: absolute;
			}

			h3 {
				text-align: left;
				font-size: 30rpx;
				color: #666666;
			}


			.border_top {
				text-align: left;
				margin: 0;
				padding: 4rpx 20rpx 4rpx;
				font-size: 24rpx;
				color: #535252;

			}
		}
	}
</style>
